<template>
  <div class="gray-box top-redius border-bottom-gray">
    <el-tabs>
      <!-- 服务条款 -->
      <el-tab-pane :label="$t('sysManagement.serviceTerms')">
        <el-tabs type="card">
          <el-tab-pane :label="$t('sysManagement.chineseInformation')">
            <tiny-mce
              ref="termFormCnRef"
              v-model="termFormCn.content"
              class="tiny-mce-width"
            />
          </el-tab-pane>
          <el-tab-pane label="English Information">
            <tiny-mce
              ref="termFormEnRef"
              v-model="termFormEn.content"
              class="tiny-mce-width"
            />
          </el-tab-pane>
        </el-tabs>
        <div
          class="default-btn primary-btn"
          style="margin-top: 10px"
          @click="saveTermsSubmit"
        >
          {{ $t("crud.saveBtn") }}
        </div>
      </el-tab-pane>
      <!-- 隐私策略 -->
      <el-tab-pane :label="$t('sysManagement.privacyPolicy')">
        <el-tabs type="card">
          <el-tab-pane :label="$t('sysManagement.chineseInformation')">
            <tiny-mce
              ref="policyFormCnRef"
              v-model="policyFormCn.content"
              class="tiny-mce-width"
            />
          </el-tab-pane>
          <el-tab-pane label="English Information">
            <tiny-mce
              ref="policyFormEnRef"
              v-model="policyFormEn.content"
              class="tiny-mce-width"
            />
          </el-tab-pane>
        </el-tabs>
        <div
          class="default-btn primary-btn"
          style="margin-top: 10px"
          @click="savePolicySubmit()"
        >
          {{ $t("crud.saveBtn") }}
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import TinyMce from '@/components/tiny-mce/index.vue'

const termFormCnRef = ref(null)
const termFormEnRef = ref(null)
const policyFormEnRef = ref(null)
const policyFormCnRef = ref(null)

const termFormCn = ref({
  content: ''
})
const termFormEn = ref({
  content: ''
})
const policyFormCn = ref({
  content: ''
})
const policyFormEn = ref({
  content: ''
})
onMounted(() => {
  init()
})

const init = () => {
  http({
    url: http.adornUrl('/sys/pconfig/info/' + 'SERVICE_TERMS_CONFIG_CN'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    if (data) {
      termFormCn.value = JSON.parse(data)
    }
  })
  http({
    url: http.adornUrl('/sys/pconfig/info/' + 'SERVICE_TERMS_CONFIG_EN'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    if (data) {
      termFormEn.value = JSON.parse(data)
    }
  })
  http({
    url: http.adornUrl('/sys/pconfig/info/' + 'SERVICE_POLICY_CONFIG_CN'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    if (data) {
      policyFormCn.value = JSON.parse(data)
    }
  })
  http({
    url: http.adornUrl('/sys/pconfig/info/' + 'SERVICE_POLICY_CONFIG_EN'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    if (data) {
      policyFormEn.value = JSON.parse(data)
    }
  })
}
const saveTermsSubmit = () => {
  if ((termFormEn.value.content && termFormEn.value.content.length > 20000) || (termFormCn.value.content && termFormCn.value.content.length > 20000)) {
    return ElMessage({
      message: $t('product.tinyMceTip'),
      type: 'error',
      duration: 1500
    })
  }
  http({
    url: http.adornUrl('/sys/pconfig/save'),
    method: 'post',
    data: http.adornData({
      paramKey: 'SERVICE_TERMS_CONFIG_EN',
      paramValue: JSON.stringify(termFormEn.value),
      remark: $t('sysManagement.serviceTermsEnConfig')
    })
  })
  http({
    url: http.adornUrl('/sys/pconfig/save'),
    method: 'post',
    data: http.adornData({
      paramKey: 'SERVICE_TERMS_CONFIG_CN',
      paramValue: JSON.stringify(termFormCn.value),
      remark: $t('sysManagement.serviceTermsCnConfig')
    })
  }).then(() => {
    ElMessage({
      message: $t('publics.operation'),
      type: 'success',
      duration: 1500
    })
  })
}
const savePolicySubmit = () => {
  if (
    (policyFormEn.value.content && policyFormEn.value.content.length > 20000) ||
    (policyFormCn.value.content && policyFormCn.value.content.length > 20000)
  ) {
    return ElMessage({
      message: $t('product.tinyMceTip'),
      type: 'error',
      duration: 1500
    })
  }
  http({
    url: http.adornUrl('/sys/pconfig/save'),
    method: 'post',
    data: http.adornData({
      paramKey: 'SERVICE_POLICY_CONFIG_EN',
      paramValue: JSON.stringify(policyFormEn.value),
      remark: $t('sysManagement.privacyPolicyEnConfig')
    })
  })
  http({
    url: http.adornUrl('/sys/pconfig/save'),
    method: 'post',
    data: http.adornData({
      paramKey: 'SERVICE_POLICY_CONFIG_CN',
      paramValue: JSON.stringify(policyFormCn.value),
      remark: $t('sysManagement.privacyPolicyCnConfig')
    })
  }).then(({ data }) => {
    if (data) init()
    ElMessage({
      message: $t('publics.operation'),
      type: 'success',
      duration: 1500
    })
  })
}
</script>

<style scoped lang="scss">
.tiny-mce-width {
  width: 1000px !important;
}
@media (max-width:1660px) {
  .tiny-mce-width {
    width: 700px !important;
  }
}
</style>
